<template>
  <el-form ref="noticeRef" :model="form" :rules="rules" label-width="80px">
    <el-row :gutter="6" >
      <el-col :span="24">
        <el-form-item label="模块标题" prop="modelTitle" style="width: 100%">
          <el-input v-model="data.modelTitle" placeholder="请输入模块标题"/>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="排序" prop="modelSort"
                      v-for="(domain, index) in dynamicValidateForm.domains"
                      :key="domain.key"
                      :prop="'domains.' + index + '.value'">
            <el-col :span="9">
              <el-select v-model="data.modelSort" clearable style="width: 100%">
                <el-option
                    v-for="dict in modelSortOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
              </el-select>
            </el-col>
            <el-col :span="9">
              <el-select v-model="data.sortType" clearable style="width: 100%">
                <el-option
                    v-for="dict in sortTypeOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
              </el-select>
            </el-col>
          <el-col :span="6">
            <el-button type="primary" class="mt-2" @click.prevent="removeDomain(domain)">删除</el-button>
            <el-button  type="primary" @click="addDomain">新增</el-button>
          </el-col>
        </el-form-item>
      </el-col>
<!--      <el-col :span="6">-->
<!--        <el-button type="primary" class="mt-2" @click.prevent="removeDomain(domain)">删除</el-button>-->
<!--        <el-button  type="primary" @click="addDomain">新增</el-button>-->
<!--      </el-col>-->
      <el-col :span="2">
        <el-form-item label="分页" prop="isPage" >
          <el-switch
              v-model="data.isPage"
          />
        </el-form-item>
      </el-col>
      <el-col :span="22">
        <el-form-item prop="pageSize" >
        <el-input-number v-model="data.pageSize" style="width: 100%"/>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="模块样式" prop="modelStyle" style="width: 100%">
<!--          <el-input v-model="data.modelStyle" placeholder="请输入模块标题"/>-->
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="栏目" prop="column" >
          <el-card class="box-card" shadow="never">
            <el-checkbox-group
                v-model="checkedColumns"
                @change="handleCheckedColumnsChange"
            >
              <el-checkbox v-for="column in columns" :key="column" :label="column">{{
                  column
                }}</el-checkbox>
            </el-checkbox-group>
          </el-card>

        </el-form-item>
      </el-col>
        <el-form-item prop="column" >
          <el-checkbox
              v-model="checkAll"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
          >全选</el-checkbox>
        </el-form-item>
    </el-row>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
//----------------------xinzeng
const formRef = ref<FormInstance>()
const dynamicValidateForm = reactive<{
  domains: DomainItem[]
  email: string
}>({
  domains: [
    {
      key: 1,
      value: '',
    },
  ],
  email: '',
})

interface DomainItem {
  key: number
  value: string
}

const removeDomain = (item: DomainItem) => {
  const index = dynamicValidateForm.domains.indexOf(item)
  if (index !== -1) {
    dynamicValidateForm.domains.splice(index, 1)
  }
}

const addDomain = () => {
  dynamicValidateForm.domains.push({
    key: Date.now(),
    value: '',
  })
}


//-----------------
const modelSortOptions = ref([
  { value: "1", label: "xxa" },
  { value: "2", label: "xxb" },
]);

const sortTypeOptions = ref([
  { value: "1", label: "升序" },
  { value: "2", label: "降序" },
]);
const params = ref({
  confi: {
    id: "",
    value: "",
    component_key: "",
  },
  services: [{//服务
    url: "",
    params: {},
    reqScript: {},
    resScript: {}
  }],
  defaultdata: {}, //默认数据
  style: { //样式
    color: "",
    size: "",
  },
  data: {
    modelTitle: "",
    isPage: undefined,
    pageSize: undefined,
    modelSort:undefined,
    sortType:undefined,
    column:[],
    modelStyle:undefined
  }, //数据
  permission: [], //权限

})
const data = reactive({
  orgInfo: {orgId: undefined, appId: undefined},
  dialogOrgInfo: {orgId: undefined, appId: undefined},
  resForm: {},
  form: {},
  content: '',
  params: {},
  rules: {
    noticeTitle: [{required: true, message: "公告标题不能为空", trigger: "blur"}],
    noticeType: [{required: true, message: "公告类型不能为空", trigger: "change"}]
  },
});
const checkAll = ref(false)
const isIndeterminate = ref(false)
const checkedColumns = ref([''])
const columns = ['未分类', '媒体报道', '新闻公告']
function handleCheckAllChange (val) {
  checkedColumns.value = val ? columns : []
  isIndeterminate.value = false
}
function handleCheckedColumnsChange  (value) {
  const checkedCount = value.length
  checkAll.value = checkedCount === columns.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < columns.length
}
</script>

<style lang='scss' scoped>
.box-card {
  width: 100%;
  height: 300px;
}
</style>
